<template>
  <div>
    <section class="min-container">
      <div class="con">
        <p class="title"><span @click="goBack">我的消息</span><span> / 消息详情</span></p>
        <div class="centent" v-html="detail.noticeContent"></div>
      </div>
    </section>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { messageDetail } from "@/api/control/order";
const router = useRouter();
const route = useRoute();

const noticeId = ref(""); // 消息ID
const detail = ref({}); // 消息详情

onMounted(() => {
  noticeId.value = route.query.noticeId;
  getDetail();
});

// 消息详情
const getDetail = () => {
  messageDetail({ noticeId: noticeId.value }).then((res) => {
    detail.value = res.data;
  });
};

// 返回上级
const goBack = () => {
  router.go(-1);
};
</script>
<style lang="less" scoped>
.con {
  width: 100%;
  height: 626px;
  background: #ffffff;
  margin: 20px 0 300px;
  padding: 20px 30px;
  .title {
    letter-spacing: 0.2em;
    span:nth-child(1) {
      color: #909090;
      &:hover {
        cursor: pointer;
      }
    }
    span:nth-child(2) {
      color: #4098ff;
    }
  }
  .centent {
    margin-top: 40px;
    width: 100%;
    height: 509px;
    padding: 0 20px;
    margin-bottom: 50px;
    text {
      letter-spacing: 0.3em;
      font-size: 14px;
    }
  }
}
</style>
